<template>
    <div>
      <LocationFilter @filterChanged="handleFilterChange" :searchTerm="searchTerm" />
      <el-row :gutter="20">
        <el-col v-for="location in filteredLocations" :key="location.id" :span="12">
          <router-link :to="{ name: 'LocationDetail', params: { locationId: location.id } }" class="location-card-link">
            <el-card class="location-card" :body-style="{ padding: '20px', display: 'flex', alignItems: 'center' }">
              <div class="image-container">
                <img :src="location.photo" class="location-photo" alt="Location Photo" />
              </div>
              <div class="location-details">
                <h3 class="location-name">{{ location.name }}</h3>
                <p>位置: {{ location.address }}</p>
                <p>类型: {{ location.type }}</p>
                <p class="location-number">{{ location.number }} 人预约</p>
              </div>
            </el-card>
          </router-link>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue';
  import LocationFilter from '@/components/Location/LocationFilter.vue';
  
  const props = defineProps({
    locations: {
      type: Array,
      required: true
    },
    searchTerm: {
      type: String,
      default: ''
    }
  });
  
  const selectedType = ref('');
  
  const filteredLocations = computed(() => {
    return props.locations.filter(location => {
      const matchesType = selectedType.value ? location.type === selectedType.value : true;
      const matchesSearch = props.searchTerm ? location.name.includes(props.searchTerm) : true; // 使用传递的 searchTerm
      return matchesType && matchesSearch;
    });
  });
  
  // 更新过滤条件
  const handleFilterChange = (filter) => {
    selectedType.value = filter.type;
  };
  
  </script>
  